<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="上级菜单">
        <el-cascader
          v-model="PerListinfo"
          :options="Perlist"
          :props="{ checkStrictly: true }"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="菜单名称">
        <el-input v-model="form.Name"></el-input>
      </el-form-item>
      <el-form-item label="菜单Url">
        <el-input v-model="form.Url"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="PerAdd">确定</el-button>
        <el-button @click="this.PerdialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        Name: "",
        Url: "",
        Pid: "",
      },
      Perlist: [],
      PerListinfo: [],
      PerdialogVisible: false,
    };
  },
  created() {
    this.TeerPer();
  },
  methods: {
    //添加权限
    PerAdd() {
      if (this.PerListinfo.length > 0) {
        this.form.Pid = this.PerListinfo[this.PerListinfo.length - 1];
      } else {
        this.form.Pid = 0;
      }
      this.axios
        .post("http://localhost:15670/api/RoleUser/AddPerDato", this.form)
        .then((res) => {
          if (res.data.Success) {
            this.$message.success(res.data.Message);
            this.$emit("AddPre");
          } else {
            this.$message.success(res.data.Message);
          }
        });
    },
    //树形
    TeerPer() {
      this.axios
        .get("http://localhost:15670/api/RoleUser/GetPerDto?id=0")
        .then((res) => {
          this.Perlist = res.data;
        });
    },
  },
};
</script>
<style>
</style>